<template>
  <div>
      <header>
          <h2>我的压力大</h2>
      </header>
      <br>
      <footer>
          <h2>我的压力大</h2>
      </footer>
      <br>
      <div class="div5">

      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.border{
    border-top:2px solid #000;
    border-bottom: 1px solid #0f0;
}
.border1(@color){
    border:3px solid @color;
}
.border2(@color:green){
    border:3px solid @color;
    width:100%;
}
header{
    .border;
    h2{
        color:red;
        font-size: 28px;
    }
}
.div5{
    .border2
}
footer{
    &:hover{
        .border1(green);
    }
    h2{
        color:red;
        font-size: 22px;
    }
}
</style>